<!-- 推广中心 -->
<template>
  <div>
    <HeaderBar
        :currentName="_t18('robinhood2_download_center')"
        :border_bottom="false"
        @showPopup="showPopup"
    ></HeaderBar>
    <!-- 团队信息 -->
    <div class="banner">

      <div :class="__theme == 'dark' ? 'plugbg' : 'plug_bg'">

        <div style="display: flex;padding-bottom: 10px; background: none;">
          <div class="xingjing" v-if="nodeList.code!==200">您还不是节点</div>
          <div class="xingjing" v-else>当前身份：节点</div>
        </div>
        <div class="shareContent">
          <div class="shareLink" :contentFix="'start'">
            <p class="ff-num">招募100个交易平台节点</p>
          </div>
        </div>
      </div>
      <div class="relative">
        <section>
          <p class="t">成为比特方舟节点 <br>让交易进阶升级</p>
          <p class="c">加入比特方舟计划，解锁专属权益，</p>
        </section>
        <div v-if="nodeList.code==200" class="jin">
          已成为节点
        </div>
        <div v-else class="jin" @click="gojiedian">
          成为节点
        </div>
      </div>
      <div v-if="!['das'].includes(_getConfig('_APP_ENV'))">
        <div class="teamInfo">
          <div>
            <p>代币名称</p>
            <span class="ff-num">BCS</span>
          </div>
          <div>
            <p>BCS总数量</p>
            <span class="ff-num">{{ teamInfo.bcsTotal || 0 }}</span>
          </div>
          <div>
            <p>BCS待释放</p>
            <span class="ff-num">{{ teamInfo.bcsReleaseTotal || 0 }}</span>
          </div>
          <div></div>
        </div>
      </div>
    </div>
    <div v-if="!['das'].includes(_getConfig('_APP_ENV'))">
      <!-- 我的推广 -->
      <div class="promotion_my" v-if="!['bitfly'].includes(_getConfig('_APP_ENV'))">
        <div class="title fw-bold">我的节点</div>
        <Tab
            :tabList="tabList"
            :active="curIndex"
            @change="changeIndex"
            :lineWidth="0"
            :flexBetween="false"
        >
          <!-- 加载中动画 -->
          <template #tabContent>
            <div class="header">
              <!--用户ID  返佣金额  注册时间 -->
              <p>{{ _t18('plug_userId') }}</p>
              <p>{{ _t18('plug_back') }}</p>
              <p>{{ _t18('plug_registerTime') }}</p>
            </div>

            <van-loading v-if="showLoading"/>
            <Nodata v-if="teamList.length <= 0 && !showLoading"></Nodata>
            <div v-else class="contentBox">
              <!--             -->
              <div class="content1" v-for="(item, index) in teamList" :key="index">
                <p class="ff-num">{{ item.sourceId || '' }}</p>
                <p class="ff-num"> {{ Number(item.fy).toFixed(4) || 0 }}</p>
                <p>{{ item.createTime ? _timeFormat(item.createTime, 'YY/MM/DD HH:mm', true) : '' }}</p>
              </div>
            </div>
          </template>
        </Tab>
      </div>
    </div>

    <!-- 质押挖矿规则弹窗 -->
    <Popup
        :show="showRule"
        @handelClose="closePopup"
        :title="txt"
        :content="popupContent"
        :direction="direction"
    >
    </Popup>


    <Dialog
        v-model:value="showDialog"
        :title="``"
        :content="_t18('jingjiren2')"
        confirm-button-color="#17ac74"
        @cancelBtn="cancelBtn"
        @confirmBtn="confirmBtn()"
        :confirmButtonText="_t18('btnConfirm', ['bitmake'])"
        :cancelButtonText="_t18('cancel')"
        z-index="200"
    ></Dialog>



  </div>
</template>

<script setup>
import {_t18} from '@/utils/public'
import HeaderBar from '@/components/HeaderBar/index.vue'
import Tab from '@/components/Tab/index.vue'
import Popup from '@/components/Popup/index.vue'
import {useUserStore} from '@/store/user/index'
import {onMounted, ref} from 'vue'
import {rulesList} from '@/api/common/index'
import {getgetMySubNode, getnodeInfo} from "@/api/user";
import Dialog from "@/components/Dialog/index.vue";
// import router from '@/router/index'
import {useRouter} from "vue-router";
const router = useRouter()
const cuttentRight = {iconRight: [{iconName: 'guize', clickTo: ''}]}
const useStore = useUserStore()
const userInfo = useStore.userInfo
const sharkCode = userInfo?.user?.activeCode
// const shareLink = `${import.meta.env.VITE_APP_PLANFORM_H5}/#/i&`
const shareLink = `${location.origin}/#/i&`
// 推广中心数据
const showLoading = ref(true)
const teamInfo = ref({})
const nodeList = ref({})
const teamList = ref([])
const popupContent = ref({})
const getgetnodeInfo = async () => {
  const nodeList1 = await getnodeInfo({})
  const code = nodeList1.code
  const data = nodeList1.data
  nodeList.value = {
    'code': code,
    'data': data
  }
  if (code === 200) {
    if (nodeList.value.data) {
      teamInfo.value = data

    }
  }
}

//成为节点弹窗

const showDialog = ref(false)
const cancelBtn = () => {
  showDialog.value = false
}
const confirmBtn = (data) => {
  //userInfo.addressExist
  if (userInfo.user.broker) {
    router.push('/jiedian2')
  } else {
    router.push('/plug3')
  }
}

const getnodeInfoList = async () => {

  const res = await getgetMySubNode()
  if ((res.code = '200')) {
    setTimeout(() => {
      showLoading.value = false
      teamList.value = res.rows
    }, 500)
  }
}
const addressExist = ref()
const gojiedian = async () => {
  addressExist.value = userInfo.addressExist
  console.log(userInfo, 'userInfo')
  if (userInfo.user.broker) {
    router.push('/jiedian2')
  } else {
    showDialog.value=true
  }

}

const getPopupContent = async () => {
  const res = await rulesList('BROKER_RULE')
  if ((res.code = '200')) {
    popupContent.value = res.data
  }
}
onMounted(() => {
  // getTeamInfo()
  getgetnodeInfo()
  getPopupContent()
  getnodeInfoList()
})
// const teamInfo = computed(() => {
//   let obj = {}
//   obj = { one: 10, two: 20, three: 30, sum: '60', amount: 10000000 }
//   return obj
// })
const showRule = ref(false)
const txt = _t18('plug_rule') //规则
const direction = ref('bottom')
let showPopup = () => {
  showRule.value = true
}
let closePopup = () => {
  showRule.value = false
}
const curIndex = ref(0)
const tabList = computed(() => {
  let list = []
  // list = ['一代', '二代', '三代']
  list = [_t18('', ['aams']), _t18('', ['aams']), _t18('', ['aams'])]
  return list
})
const changeIndex = (v) => {
  // curIndex.value = v
  // teamList.value = []
  // getTeamList()
}
</script>

<style lang="scss" scoped>
* {
  color: var(--ex-login-input-background-color);
  background-color: var(--ex-home-font-color);
  font-size: 14px;
}

.content {
  font-size: 0;
  min-height: 100vh;
  position: relative;

  .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .toBack {
    position: absolute;
    margin-top: 30px;
    margin-left: 20px;

    .back {
      font-size: 18px;
    }
  }

  .code_box {
    min-width: 300px;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;

    p.code1 {
      font-size: 18px;
      text-align: center;
    }

    p.code2 {
      font-size: 12px;
      text-align: center;
      color: #b5b5b5;
      margin-top: 10px;
    }

    .erweima {
      padding: 20px 0;

      p {
        margin-top: -25px;
        font-size: 20px;
        text-align: center;
        font-weight: bold;
      }
    }

    .link {
      word-break: break-all;
    }
  }
}

.banner {
  .plug_bg {
    background: url('https://s2023.oss-cn-qingdao.aliyuncs.com/resource/images/dark/jiedianbg.png') no-repeat center #000000;
    background-size: cover;
    padding: 10px 15px 50px;

    .shareContent {
      background: none;

      .shareContent_title {
        font-size: 20px;
        color: var(--ex-font-color8);
      }

      .shareContent_info {
        font-size: 14px;
        color: var(--ex-font-color8);
        padding: 10px 0 30px;
      }

      .sharkCode,
      .shareLink {
        margin-top: 1rem;
        background: none;

        p {
          line-height: 1.2;
          font-size: 12px;
          word-break: break-all;
          color: var(--ex-font-color8);
          // word-wrap:break-word;
          // word-break:normal;
        }

        .ff-num {
          background: none;
          font-size: 26px;
          font-weight: 600;
          line-height: 40px;
          color: #ffffff;
          margin-bottom: .5rem;
        }
      }
    }
  }

  .plugbg {
    background: url('https://s2023.oss-cn-qingdao.aliyuncs.com/resource/images/dark/plugbg.png') no-repeat center;
    background-size: cover;
    padding: 45px 15px 20px;

    .shareContent {
      width: 60%;

      .shareContent_title {
        font-size: 20px;
        color: var(--ex-font-color6);
      }

      .shareContent_info {
        font-size: 14px;

        padding: 10px 0 30px;
      }

      .sharkCode,
      .shareLink {
        p {
          line-height: 1.2;
          font-size: 12px;
          word-break: break-all;
          // word-wrap:break-word;
          // word-break:normal;
        }
      }
    }
  }

  img {
    width: 100%;
    height: auto;
  }

  .teamInfo {
    padding: 15px 0 0;
    display: flex;
    flex-wrap: wrap;

    & > div {
      width: 33.33%;
      padding: 15px 5px;
      text-align: center;
      // flex: 1;
      p {
        height: 30px;
        color: var(--ex-passive-font-color);
        margin-bottom: 15px;
        word-wrap: break-word;
      }

      span {
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
}

.relative {
  margin-left: 15px;
  margin-right: 15px;

  section {
    padding-top: 1rem;

    p.t {
      font-size: 18px;
      font-weight: 600;
      line-height: 26px;
    }

    p.c {
      margin-top: .5rem;
      font-size: 0.38rem;
      line-height: 0.693333rem;
    }
  }

}

.promotion_my {
  margin-left: 15px;
  margin-right: 15px;

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
  }

  .header {
    padding: 15px 15px 10px;
    display: flex;

    & > p:first-child {
      text-align: left;
    }

    & > p:last-child {
      text-align: right;
    }

    p {
      font-size: 12px;
      flex: 1;
      color: var(--ex-passive-font-color);
      text-align: center;
    }
  }

  .contentBox {
    height: 50vh;
    overflow: auto;
  }

  .content1 {
    padding: 15px 0;
    display: flex;

    & > p:first-child {
      text-align: left;
    }

    & > p:last-child {
      text-align: right;
    }

    p {
      padding: 0 15px;
      font-size: 12px;
      flex: 1;
      text-align: center;
      font-weight: 400;
    }
  }
}

.van-loading {
  text-align: center;
  padding: 30px;
}

:deep(.van-tabs__wrap) {
  display: none;
}

:deep(.van-tab) {
  color: var(--ex-home-list-ftcolor) !important;
}

:deep(.van-tab--active) {
  color: var(--ex-home-list-ftcolor3) !important;
}

.jin {
  color: #000;
  background: #fcd535;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 7px;
  font-weight: bold;
  margin-top: 10%;
}

.xingjing {
  color: #202630;
  border: 1px solid #fcd535;
  padding: 5px 10px;
  border-radius: 8px;
  background-color: #fcd535;
}
</style>
<style>
.dialog-content{
  color: #000;
}
</style>
